
<template>
<div>
  <el-row>
    <el-col :span="24" style="margin-top:0px;padding-top:0px">
      <div class="grid-content ep-bg-purple-dark center"  style="text-align:center; ">
        <el-button type="Default" :icon="View" @click="getHtmlList" style="margin-right:20px">预览</el-button>
        <el-button type="primary" :icon="Printer" @click="submitPrint">浏览器打印</el-button>
        <el-button type="success" :icon="Printer" @click="print2List">直接打印</el-button>
      </div>
    </el-col>
  </el-row>

   <el-row>
    <el-col :span="18">
        <div class="grid-content ep-bg-purple" style="margin-top:10px" >
        <el-row :gutter="20">
          <el-col :span="2"></el-col>
           <el-col :span="6">
            <el-form-item label="每扎数量：" required>
              <el-input v-model="state.eachQty"  style="width:120px"  />
            </el-form-item>
           </el-col>

            <el-col :span="8">
              <el-form-item label="指定页码范围：" style="color:red">
                <el-row :gutter="20">
                  <el-col :span="10">
                    <el-input v-model="state.startPage" style="width:80px" />
                  </el-col>
                  <el-col class="text-center" :span="1" >-</el-col>
                  <el-col :span="10">
                    <el-input v-model="state.endPage" style="width:80px" />
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-form-item label="总标签数："  >
                  {{state.totalNum}}
              </el-form-item>
            </el-col>
        </el-row>
      </div>
    </el-col>
   </el-row>
  <el-row>
    <el-col :span="9">
      <div class="grid-content ep-bg-purple" style="margin-right:40px" >

          <el-table :data="tableData" id="print-div1"   >
            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
            <el-table-column prop="fname" label="字段名" width="140" >
                <template #default="scope">
                    <el-input v-model="scope.row.fname" style="width:100px" />
                </template>
            </el-table-column>
   
            <el-table-column prop="fvalue" label="字段值" width="220" >
                <template #default="scope">

                    <el-select v-if="scope.row.inputType==2"
                      v-model="scope.row.fvalue"

                      filterable
                      allow-create
                      default-first-option
                      :reserve-keyword="false"
                      placeholder="请选择或者输入"
                      style="width: 160px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>

                    <el-input v-if="scope.row.inputType==1" v-model="scope.row.fvalue" style="width:160px" />
                </template>
            </el-table-column>

            <el-table-column  prop="fvalue"  label="操作" >
                <template #default="{row,$index}">
                    <el-button type="primary" :icon="Top" circle @click="addRow(row,$index)"   />
                    <el-button type="primary" :icon="Bottom" @click="addRow(row,$index+1)"  circle  />
                    <el-button type="primary" :icon="Delete" @click="delRow($index)" circle  />
                </template>
            </el-table-column>
          </el-table>


          <el-dialog v-model="state.dialogFormVisible" title="请选择控件类型" width="500">
            <el-radio-group v-model="state.inputType">
              <el-radio value=1 size="large">输入框</el-radio>
              <el-radio value=2 size="large">下拉框</el-radio>
            </el-radio-group>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="state.dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateRow()">
                  确认
                </el-button>
              </div>
            </template>

          </el-dialog>
    
      </div>
    </el-col>

    <el-col :span="9">
      <div class="" >
          <el-space  :size="0">
          <el-card style="max-width: 200px;height:700px">
            <template #header>
              <div class="card-header">
                <span>设置打印尺码数量</span>
              </div>
            </template>

            <el-form  label-width="auto" style="" >

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize1"  placeholder="尺码"  />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum1"  placeholder="数量"   />
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize2"  placeholder="尺码"  />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum2"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize3"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum3"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize4"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum4"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize5"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum5"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize6"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum6"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize7"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum7"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize8"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum8"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize9"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum9"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize10"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum10"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize11"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum11"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize12"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum12"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize13"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum13"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize14"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum14"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize15"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum15"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="" class="formLabel">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-input v-model="state.fsize16"  placeholder="尺码" />
                </el-col>
                <el-col :span="12">
                  <el-input  v-model="state.fsizeNum16"  placeholder="数量"  />
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          </el-card>

           <el-card style="max-width: 230px;height:700px">
            <template #header>
              <div class="card-header">
                <span>设置打印部位</span>
              </div>
            </template>
           <el-checkbox-group v-model="checkList">
            <el-checkbox  label="前幅" value="前幅" size="large" />
            <el-checkbox  label="后幅" value="后幅" size="large" />
            <el-checkbox   label="左袖" value="左袖" size="large" />
            <el-checkbox   label="右袖" value="右袖" size="large" />
            <el-checkbox   label="左侧拼" value="左侧拼" size="large" />
            <el-checkbox   label="右侧拼" value="右侧拼" size="large" />
            <el-checkbox   label="前左" value="前左" size="large" />
            <el-checkbox   label="前右" value="前右" size="large" />
            <el-checkbox   label="后左" value="后左" size="large" />
            <el-checkbox   label="后右" value="后右" size="large" />
           </el-checkbox-group>

           <el-input
              v-model="state.partArea"
              style="width: 160px"
              :rows="10"
              type="textarea"
              placeholder="每个部位之后换行"
            />
           </el-card>
          </el-space>
        
      </div>
    
    </el-col>
    <el-col :span="6">
      <div class="grid-content ep-bg-purple" >

        <el-form label-position="top" label-width="auto" style="max-width: 400px" :inline="inline">
            <el-form-item label="设置纸张宽x高(mm)">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-input-number v-model="state.paperWidth"   placeholder="宽(mm)"  :controls="false" style="width:80px" />
                </el-col>
                <el-col class="text-center" :span="1" >X</el-col>
                <el-col :span="10">
                  <el-input-number  v-model="state.paperHeight"   placeholder="高(mm)"   :controls="false" style="width:80px" />
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="设置顶部距离(pt)"  >
              <el-input-number v-model="state.topVal"    placeholder="顶部距离(pt)" :controls="false"   />
            </el-form-item>
             <el-form-item label="设置行距(pt)"  >
              <el-input-number v-model="state.lineHeight"   placeholder="设置行距(pt)"  :controls="false"  />
            </el-form-item>

            <el-form-item label="设置字段名宽x高(pt)">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input-number  v-model="state.labelWidth"   placeholder="宽(pt)"  :controls="false" style="width:80px"  />
                </el-col>
                <el-col class="text-center" :span="1" >X</el-col>
                <el-col :span="8">
                  <el-input-number  v-model="state.labelHeight"  placeholder="高(pt)"  :controls="false" style="width:80px"  />
                </el-col>
                 <el-col :span="6">
                  <el-select  v-model="state.labelAlign" placeholder="Select" style="width:80px" >
                      <el-option
                        v-for="item in labelAlignOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="设设置字段名字体(pt)">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-input-number  v-model="state.labelFontSize"   placeholder="字体大小"  :controls="false" style="width:80px" />
                </el-col>
                <el-col class="text-center" :span="1" >-</el-col>
                <el-col :span="10">
                   <el-select v-model="state.labelFontWeight" id="labelFontWeight" style="width:80px" >
                      <el-option
                        v-for="item in labelFontWeight"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="设置字段值宽x高(pt)">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input-number  v-model="state.valueWidth"  placeholder="宽(pt)" :controls="false" style="width:80px" />
                </el-col>
                <el-col class="text-center" :span="1" >X</el-col>
                <el-col :span="8">
                  <el-input-number  v-model="state.valueHeight"  placeholder="高(pt)" :controls="false" style="width:80px" />
                </el-col>

                 <el-col :span="6">

                  <el-select  v-model="state.valueAlign" placeholder="Select"  style="width:80px" >
                      <el-option
                        v-for="item in labelAlignOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-col>
              </el-row>
            </el-form-item>

             <el-form-item label="设置字段值字体(pt)">
              <el-row :gutter="20">
                <el-col :span="10">
                  <el-input-number  v-model="state.valueFontSize" placeholder="字体大小" :controls="false" style="width:80px" />
                </el-col>
                <el-col class="text-center" :span="1" > - </el-col> 
                <el-col :span="10">
                   <el-select v-model="state.valueFontWeight" id="labelFontWeight" >
                      <el-option
                        v-for="item in labelFontWeight"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-col>
              </el-row>
            </el-form-item>

        </el-form>   
      </div>               
    </el-col>
  </el-row>
  <start-preview ref="preview" />
</div>
</template>

<script  setup name="print-label">
import { reactive,onMounted,ref } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import { Delete, Edit, Search, Share, Upload,View,Printer,Top,Bottom } from '@element-plus/icons-vue'
import startPreview from "../../components/preview.vue";
import { ElMessage, ElMessageBox } from 'element-plus'


const preview = ref(null);

// 初始化 provider
hiprint.init({
  providers: [defaultElementTypeProvider()],
});
/**
 * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
onMounted(() => {
  buildLeftElement();
 nextLine();
 // buildDesigner();
});

/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 而且 必须包含 class="ep-draggable-item" 否则无法拖拽进设计器
 */
const buildLeftElement = () => {
  // eslint-disable-next-line no-undef
  hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
};
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
let hiprintTemplate ;

const value = ref([])
const options = [
  {
    value: 'sizeNum',
    label: '尺码',
  },
  {
    value: 'part',
    label: '部位',
  },
  {
    value: 'qty',
    label: '数量',
  },
  {
    value: 'numDesc',
    label: '扎号',
  },
];
let  tableData =reactive([
  {fname:"款号：",fvalue:'',inputType:1},
  {fname:"颜色：",fvalue:'',inputType:1},
  {fname:"尺码：",fvalue:'sizeNum',inputType:2},
  {fname:"部位：",fvalue:'part',inputType:2},
  {fname:"数量：",fvalue:'qty',inputType:2},
  {fname:"扎号：",fvalue:'numDesc',inputType:2},
]);
const checkList = ref([]);
const labelAlignOptions = [
  {
    value: 'left',
    label: '左',
  },
  {
    value: 'center',
    label: '居中',
  },
  {
    value: 'right',
    label: '右',
  },
];

const labelFontWeight =[ 
{
    value: 'bold',
    label: '加粗',
  },
  {
    value: 'none',
    label: '常规',
  },
];

const state = reactive({  
  totalQty :0,
  eachQty :0,
  paramView : false,
  topVal:10,
  paperWidth:40,
  paperHeight:90,
  lineWidth:10,
  labelWidth:30,
  labelHeight:14,
  lineHeight:30,
  valueWidth:60,
  valueHeight:14,
  labelAlign:"right",
  valueAlign:"left",
  labelFontSize: 10,
  valueFontSize:10,
  valueFontWeight: "bold",
  labelFontWeight:"",

  fname1:"款号：",
  fname2:"颜色：",
  fname3:"尺码：",
  fname4:"部位：",
  fname5:"数量：",
  
  fname6:"扎号：",
  fvalue3:"sizeNum",
  fvalue4:"part",
  fvalue5:"qty",
  fvalue6:"numDesc",
  partArea:'',
  startPage:1,
  endPage:0,

  totalNum: 0,

  dialogFormVisible:false,
  inputType: "1",

}); 

Array.prototype.insert = function(index) {
 index = Math.min(index, this.length);
 arguments.length > 1
 && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
 && this.insert.apply(this, arguments);
 return this;
};

Array.prototype.remove = function(from, to) {
 var rest = this.slice((to || from) + 1 || this.length);
 this.length = from < 0 ? this.length + from : from;
 return this.push.apply(this, rest);
};

var rowObj={};
var rowIndex=0;
const addRow = (data,index) =>{
    state.dialogFormVisible=true;
    rowObj =  {fname:"",fvalue:'',inputType:state.inputType};
    rowIndex = index;
}

const updateRow = () =>{
   state.dialogFormVisible=false;
  //console.log(data,index);
  //var obj =  {fname:"",fvalue:'',inputType:1};
  rowObj["inputType"] = state.inputType;
  tableData.insert(rowIndex,rowObj);
  console.log(rowObj,"rowObj");
}

const delRow = (index) =>{
  console.log(index);
  tableData.remove(index);
}

const printData= {};

const getPrintTemplate =() =>{
  printData.value= {};
  hiprintTemplate = new hiprint.PrintTemplate();
  var panel = hiprintTemplate.addPrintPanel({ width: state.paperWidth, height: state.paperHeight, paperFooter: 340, paperHeader: 0 ,paperNumberDisabled:true});
  var yVal= parseInt(state.topVal);
  var xVal = 4;
 
  console.log(state);
  for (let index = 0; index <tableData.length; index++) {
    // if(state["fname"+index] == undefined || state["fname"+index]==''){
    //   console.log("空字段跳过"+index);
    //   continue;
    // }
    var dataItem = tableData[index];
    printData[dataItem.fvalue] = dataItem.fvalue; 
    panel.addPrintText({ options: { width: state.labelWidth, height: state.labelHeight, top: yVal, left: xVal, 
                    title: dataItem.fname, textAlign: 'right',fontSize:state.labelFontSize,fontWeight:state.labelFontWeight} });
    var t_val_x=  xVal+state.labelWidth+2;
    // if(state["fvalue"+index]=="qty" || state["fvalue"+index]=='numDesc' || state["fvalue"+index]=='sizeNum' || state["fvalue"+index]=='part'){
    //   panel.addPrintText({ options: { width: state.valueWidth, height: state.valueHeight, top: yVal, left:t_val_x, 
    //                 title: "",field:state["fvalue"+index], textAlign: 'left',fontSize:state.valueFontSize,fontWeight:state.valueFontWeight} });
    // }else{
    //   panel.addPrintText({ options: { width: state.valueWidth, height: state.valueHeight, top: yVal, left:t_val_x, 
    //                 title: state["fvalue"+index], textAlign: 'left',fontSize:state.valueFontSize,fontWeight:state.valueFontWeight} });
    // }

    panel.addPrintText({ options: { width: state.valueWidth, height: state.valueHeight, top: yVal, left:t_val_x, 
                     title: "",field:dataItem.fvalue, textAlign: 'left',fontSize:state.valueFontSize,fontWeight:state.valueFontWeight} });
    
    panel.addPrintHline({ options: { width: state.valueWidth, top: yVal+state.valueHeight, left: t_val_x ,borderStyle: "dashed",} });
    yVal +=   state.lineHeight;     
  }

  var t_val_x_2=  xVal+state.labelWidth;
  panel.addPrintText({ options: { width: 60, height: state.valueHeight, top: yVal, left:xVal, 
                  title: "总扎",field:"totalNum", textAlign: 'left',fontSize:7,} });
  
  panel.addPrintText({ options: { width: state.valueWidth, height: state.valueHeight, top: yVal, left:t_val_x_2, 
                  title: "总数",field:"fsizeNum", textAlign: 'right',fontSize:7,} });
  
  var widthPt = state.paperWidth * 72 / 25.4 /2 -5 ;
  yVal =  state.paperHeight * 72 / 25.4  -12 ;
  panel.addPrintText({ options: { width: 10, height: 10, top: yVal, left:widthPt, 
                  title: "",field:"fPageNo", textAlign: 'center',fontSize:7,} }); 

  let json = hiprintTemplate.getJson();
  console.log(json);
};

const getPrintData =() =>{
    var printDataList = [];
    var partList = [];
    if( state.eachQty<=0){
    ElMessageBox.alert('请输入每扎数量', '错误提示', {
      confirmButtonText: '确认',
     })
      return;
    };
    partList.push(...checkList.value);
    const lines = state.partArea.split(/\r?\n/);
    for(let i=0;i<lines.length;i++){
      if(lines[i].trim()!=''){
          partList.push(lines[i]);
      }
    }

    if( partList.length<1){
      ElMessageBox.alert('请选择打印部位', '错误提示', {
        confirmButtonText: '确认',
        })
      return;
    }
    var flag=false;
    for (let index = 1; index <9; index++) {
      if(state["fsize"+index]!=undefined && state["fsizeNum"+index] ){
        flag=true;
      }
    }
    if(flag==false){
       ElMessageBox.alert('请设置打印尺码数量', '错误提示', {
        confirmButtonText: '确认',
        })
      return;
    }

   var count = state.totalQty / state.eachQty;
   var total=0;
   var totalNum =0;

    //尺码数量
   var pageNo=0;
   for (let j = 1; j <17; j++) {
      if(state["fsize"+j]==undefined || state["fsizeNum"+j]=='' ){
        console.log("空字段fsize跳过"+j);
        continue;
      }
      var fsize = state["fsize"+j];
      var fsizeNum = state["fsizeNum"+j];
      console.log("fsizeNum:  "+state["fsizeNum"+j] );
      count = state["fsizeNum"+j] / state.eachQty;
      if(state["fsizeNum"+j] % state.eachQty >0 ){
          count= Math.floor(count) +1;
      }
   
      console.log("count:  "+count + " partList" +partList.length );
      //部位
     
      for(let i=0; i<partList.length; i++){
          for (let index =  1; index <= count; index++) {
              var obj = JSON.parse( JSON.stringify(printData));
              obj.qty= state.eachQty ;
              //var index_1 = index+1;
              total = index * state.eachQty;
              if(total > fsizeNum){
                obj.qty = (fsizeNum - (index -1)* state.eachQty) ;
              }
              obj.numDesc= "第"+ index +"扎"; 
              obj["sizeNum"]= fsize;
              obj["part"]=partList[i];
              obj.fsizeNum = fsizeNum;
              obj.totalNum= count;
              pageNo = pageNo+1;
              obj["fPageNo"] = pageNo;
              printDataList.push(obj);   
          }
      }
    }  

    console.log(printDataList);
    return printDataList;
}

//eslint-disable-next-line
const getHtmlList = () => {
  getPrintTemplate();
  var  data= getPrintData();
  var startPage=state.startPage;
  var endPage=state.endPage;
  if(state.startPage<=0){
    startPage=1;
  }
  if(state.endPage<=0){
    endPage=data.length;
  }
  state.totalNum=data.length;
  var printData = data.slice(startPage-1,endPage);
  let html = hiprintTemplate.getHtml(printData);
  //console.log(html);
  preview.value.showModal(html);
};

 // eslint-disable-next-line no-undef
const submitPrint =()=>{

  // 参数: 打印时设置 左偏移量，上偏移量
  let options = { leftOffset: 0, topOffset: 0 };
  // 扩展
  let ext = {
    callback: () => {
      console.log("浏览器打印窗口已打开");
    },
    styleHandler: () => {
      // 重写 文本 打印样式
     // return "<style>.hiprint-printElement-text{color:red !important;}</style>";
    },
  };


  getPrintTemplate();
  var  data= getPrintData();
  var startPage=state.startPage;
  var endPage=state.endPage;
  if(state.startPage<=0){
    startPage=1;
  }
  if(state.endPage<=0){
    endPage=data.length;
  }
  state.totalNum=data.length;
  var printData = data.slice(startPage-1,endPage);
  //localStorage.setItem("paramSetting",JSON.stringify(state));
  // 调用浏览器打印
  hiprintTemplate.print(printData);
  state.startPage=1;
  state.endPage=0;
}

const print2List = () => {

  getPrintTemplate();
  var  data= getPrintData();
  var startPage=state.startPage;
  var endPage=state.endPage;
  if(state.startPage<=0){
    startPage=1;
  }
  if(state.endPage<=0){
    endPage=data.length;
  }
  state.totalNum=data.length;
  var printData = data.slice(startPage-1,endPage);

  if (hiprint.hiwebSocket.opened) {
    hiprintTemplate.print2(printData);
     state.startPage=1;
      state.endPage=0;
  } else {
    alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
  }
};


function nextLine() {  
	  // 使用 querySelectorAll 方法选择页面上所有 class 为 'el-input__inner' 的元素
	  const focusableElements = document.querySelectorAll('.el-input__inner');  
	  // 遍历所有可聚焦元素  
	  focusableElements.forEach((el, index) => {  
	    // 为每个元素添加 keyup 事件监听器  
	    el.addEventListener('keyup', function(event) {  
	      // 判断用户是否按下了回车键  
	      if (event.key === 'Enter' || event.keyCode === 13) {  
	        // 阻止默认的回车行为（比如表单提交等）  
	        event.preventDefault();  
	        // 计算下一个可聚焦元素的索引，使用模运算 % 实现循环，当到达最后一个元素时，索引会回到0，即第一个元素  
	        const nextIndex = (index + 1) % focusableElements.length;  
	        // 将焦点移动到下一个可聚焦元素  
	        focusableElements[nextIndex].focus();  
	      }  
	    });  
	  });  
	}


</script>

<style>

.demo-form-inline .el-input {
  --el-input-width: 100px;
}


/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
  border-color: purple !important;
}

.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
  border-top: 3px dashed purple !important;
}

.hiprint-headerLine:hover:before {
  content: "页眉线";
  left: calc(50% - 18px);
  position: relative;
  background: #ffff;
  top: -14px;
  color: purple;
  font-size: 12px;
}

.hiprint-footerLine:hover:before {
  content: "页脚线";
  left: calc(50% - 18px);
  position: relative;
  color: purple;
  background: #ffff;
  top: -14px;
  font-size: 12px;
}
</style>
<style scoped>
/* 区域 */
.left {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.center {
  margin: 0 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 20px;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
.right {
  background: white;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  padding: 10px 0;
  box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
  overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  margin: 10px 0 0 24px;
}
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 4px 10px;
  margin: 10px 8px 4px 8px;
  width: 38%;
  min-height: 60px;
  border-radius: 4px;
  box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {
  font-size: 1.5rem;
}
.item span {
  font-size: 14px;
}

.rightlabel {
  font-size: 16px; 
  font-weight: bold;
  margin-top: 20px;
}

.tableClass {

  border: #1f1919 solid;
  border-width: 1px;
  text-align: center;
  margin-top: 20px;
}

.tableClass tr {
  text-align: center;
  height: 40px;
}
.tableClass th{
  font-size: 18px;
  font-weight: bold;
  color: blue;
  height: 40px;
}
 .input {
  height: 24px;
  padding: 2px 4px;
}
 .input:hover {
  border-color: rgb(245, 155, 241);
  border-radius: 4px;
}

.textInput{
  padding-top: 5px;
}

.card-header{
  font-size: 18px;
  color: blue;
  font-weight: bold;
}

.formLabel{

  margin-top:0x;
  margin-bottom:4px
}
</style>
